<script setup>
import { Plus, Minus } from "@element-plus/icons-vue"   //按需引入图标
import { store } from '../store';
import { storeToRefs } from 'pinia';
const mystore = store();
const { shoppingCarList } = storeToRefs(mystore);//数据解构
const incement = id => {
    mystore.increment(id);
}
const deincrement = id => {
    mystore.deincrement(id)
}
const calc=()=>{
mystore.payoff()
}
</script>

<template>
    购物车
    <el-table :data="shoppingCarList" border style="width: 100%">
        <el-table-column prop="pid" label="商品编号" width="180" />
        <el-table-column label="商品图片">
            <template v-slot="scope">
                <el-avatar shape="square" :size="50" :fit="fit" :src="scope.row.photo" />
            </template>
        </el-table-column>
        <el-table-column prop="title" label="商品名称" width="180" />
        <el-table-column #default="scope" label="商品单价">
            <el-tag type="warning">￥{{ scope.row.price }}元/单位</el-tag>
        </el-table-column>
        <el-table-column label="购买数量">
            <template #default="scope">
                <el-button type="success" :icon="Minus" circle @click="deincrement(scope.row.pid)" />
                &nbsp;<el-tag type="primary"> {{ scope.row.number }}</el-tag>&nbsp;
                <el-button type="success" :icon="Plus" circle v-on:click="incement(scope.row.pid)" />
            </template>
        </el-table-column>
    </el-table>
    <el-divider />
    <div>
        <h1>商品总价：￥{{ mystore.totalPrice.toFixed(2) }}元</h1> 
        <el-button type="success" :icon="Plus"  v-on:click="calc" >收银台结算</el-button>
    </div>
</template>

<style scoped>
h1{
    display: inline-block;
    margin-right: 100px;
}
</style>
